<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../wh2114/vuedemo/lib/vue.js"></script>
    <link rel="stylesheet" href="..wh2114/vuedemo/lib/animate.css" />
    <style>
      .static {
        width: 150px;
        height: 150px;
        font-size: 40px;
        text-align: center;
        line-height: 150px;
      }
      .a {
        background: firebrick;
      }
      .b {
        border: 20px solid blueviolet;
      }
      .c {
        border-radius: 50%;
      }

      .navs {
        width: 440px;
        display: flex;
        justify-content: space-between;
      }
      .nav {
        width: 100px;
        height: 38px;
        border-radius: 10px;
        text-align: center;
        line-height: 38px;
        background: pink;
        color: #fff;
        cursor: pointer;
      }
      .nav.active {
        background: deeppink;
        color: aquamarine;
      }

      .citem {
        width: 440px;
        height: 440px;
        border-radius: 20px;
        color: #f50;
        font-size: 60px;
        background: darkorchid;
        text-align: center;
        line-height: 440px;
        margin-top: 20px;
      }
      table td {
        border: 1px solid #000;
        padding: 3px;
      }
      .img {
        width: 200px;
        height: 200px;
        border-radius: 50%;
      }

      .v-enter {
        opacity: 0;
      }
      .v-enter-to {
        opacity: 1;
      }

      .v-leave {
        opacity: 1;
      }
      .v-leave-to {
        opacity: 0;
      }
      .v-enter-active {
        transition: all 2s;
      }
      .v-leave-active {
        transition: all 2s;
      }

      @keyframes b-enter {
        from {
          opacity: 0;
          transform: scale(0);
        }
        to {
          opacity: 1;
          transform: scale(1);
        }
      }
      @keyframes slide-leave {
        0% {
          opacity: 1;
          transform: scale(1);
        }
        100% {
          opacity: 0;
          transform: scale(0);
        }
      }
      .a-enter-active {
        animation: b-enter 1.2s linear both;
      }
      .a-leave-active {
        animation: slide-leave 1.2s linear both;
      }

      .zoom-enter-active {
        animation: zoomInDown 1s;
      }
      .zoom-leave-active {
        animation: zoomOutDown 1s;
      }

      .light-enter-active {
        animation: rotateInDownLeft 1s;
      }
      .light-leave-active {
        animation: rotateOutDownLeft 1s;
      }

      .fade-enter-active {
        animation: fadeInRight 1s;
      }
      .fade-leave-active {
        animation: fadeOutRight 1s;
      }
      .appear {
        animation: tada 1.5s;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h2>{{title}}</h2>
      <div>
        <transition>
          <img
            v-show="show"
            class="img"
            src="http://47.104.209.44/base/imgs/1.jpg"
            alt=""
          />
        </transition>
        <button @click="show=!show">点击切换</button>
      </div>
      <div>
        <transition name="a">
          <img
            v-show="show1"
            class="img"
            src="http://47.104.209.44/base/imgs/1.jpg"
            alt=""
          />
        </transition>
        <button @click="show1=!show1">点击切换</button>
      </div>
      <div>
        <transition name="zoom">
          <img
            v-show="show2"
            class="img"
            src="http://47.104.209.44/base/imgs/1.jpg"
            alt=""
          />
        </transition>
        <button @click="show2=!show2">点击切换</button>
      </div>

      <div>
        <transition name="light">
          <img
            v-show="show3"
            class="img"
            src="http://47.104.209.44/base/imgs/11.jpg"
            alt=""
          />
        </transition>

        <button @click="show3=!show3">点击切换4</button>
      </div>
      <div>
        <transition name="fade" appear appear-active-class="appear">
          <img
            v-show="show4"
            class="img"
            src="http://47.104.209.44/base/imgs/22.jpg"
            alt=""
          />
        </transition>
        <button @click="show4=!show4">点击切换5</button>
      </div>
    </div>

    <script>
      const vm = new Vue({
        data: {
          title: "Vue transition 过渡",
          show: true,
          show1: true,
          show2: true,
          show3: true,
          show4: true,
        },

        methods: {},
        mounted() {
          document.getElementsByTagName("title")[0].innerHTML = this.title;
        },
      }).$mount("#app");
    </script>
    <!-- 

        route  页面切换    进入和离开的动画  
        Vue 提供了 transition 的封装组件  任何元素和组件添加进入/离开过渡
        v-if
        v-show
        组件切换  (动态组件切换  子组件切换)


        过渡  (0-1)  
        在进入/离开的过渡中，会有 6 个 class 切换
        v-enter  进入之前    开始帧 过渡
        v-enter-active 正在进入   animation
        v-enter-to  进入完成   结束帧

        v-leave  离开之前
        v-leave-active  正在离开
        v-leave-to   离开完成

        v-   transition 没有name 默认 v-
        transition 添加 name = fade  v 替换成 fade 

        初始化渲染 过渡 
        appear
        appear-active-class  动画 

        v-if / v-show 
     -->
  </body>
</html>
